<template>
  <div class="home">
    <img :src="image" alt="Logo" />
    <h1 class="title">Homes333ddd</h1>
    <p>{{ message }}</p>
    <p>{{ name }}</p>
    <p>{{ count }}</p>
    <el-button type="primary" @click="increment">Increment</el-button>
  </div>
</template>

<script setup>
import { computed, inject, onMounted, onUnmounted, ref, watch } from 'vue'
import logo from '@/assets/logo.png'
import { useStore } from 'vuex'
import { usersStore } from '@/store/userInfo.js'
import lodash from 'lodash'
import { getLogin } from '@/api/login'

const message = ref('Hello, Vue 3!')
const image = logo
const store = useStore()

const count = computed(() => store.getters.count)

console.log('lodash', lodash.add(0.2, 0.3)) // 计算和数 0.5

const dayjs = inject('dayjs')
const date = new Date()
const formattedDate = dayjs(date).format('YYYY-MM-DD')
console.log(formattedDate, 'formattedDate')
console.log(import.meta.env.VITE_BASE_URL)
const increment = () => {
  store.dispatch('increment')
  console.log(count, 'count')
}

//获取pinia
const _usersStore = usersStore()
//修改pinia变量
setTimeout(() => {
  _usersStore.setUserInfo('44444444444444')
  console.log(_usersStore.userInfo.nane, '修改pinia变量')
}, 1000)

//监听
watch(
  () => _usersStore.userInfo.nane,
  (newVal, oldVal) => {
    console.log(newVal, oldVal, '监听')
  }
)

onMounted(async () => {
  const result = await getLogin({
    loginNum: '18620086160',
    password: '5c40258e7e4852903cb305e533c5ef4a',
    appId: '0154981b-11c5-49ad-839d-a3420af507d8'
  })
  console.log('mounted', result)
})

onUnmounted(() => {
  console.log('unmounted')
})
</script>
<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  font-size: 20px;
  color: #535bf2;
  .title {
    color: #f10202;
    font-size: 30px;
  }
}
</style>
